/**
 * Badge 徽章组件
 * 统一的徽章样式，支持不同类型和尺寸
 */

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { COLORS, RADIUS, FONT_SIZE, FONT_WEIGHT } from '../../styles/constants';

/**
 * @param {Object} props
 * @param {string} props.text - 徽章文字
 * @param {string} props.type - 徽章类型 'level' | 'distance' | 'custom'
 * @param {string} props.size - 尺寸 'sm' | 'md' | 'lg'
 * @param {string} props.backgroundColor - 自定义背景色
 * @param {string} props.color - 自定义文字颜色
 * @param {Object} props.style - 额外样式
 * @param {Object} props.textStyle - 文字额外样式
 * @param {boolean} props.pointerEvents - 是否响应触摸事件
 */
export default function Badge({
  text,
  type = 'level',
  size = 'md',
  backgroundColor,
  color,
  style,
  textStyle,
  pointerEvents = 'none',
}) {
  if (!text) return null;

  const containerStyle = [
    styles.container,
    styles[`size_${size}`],
    type === 'level' && styles.levelBadge,
    type === 'distance' && styles.distanceBadge,
    backgroundColor && { backgroundColor },
    style,
  ];

  const textStyles = [
    styles.text,
    styles[`text_${size}`],
    color && { color },
    textStyle,
  ];

  return (
    <View style={containerStyle} pointerEvents={pointerEvents}>
      <Text style={textStyles}>{text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: RADIUS.md,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 3,
  },

  // 尺寸
  size_sm: {
    paddingHorizontal: 6,
    paddingVertical: 3,
    borderRadius: RADIUS.sm,
  },

  size_md: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: RADIUS.md,
  },

  size_lg: {
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: RADIUS.md,
  },

  // 类型
  levelBadge: {
    backgroundColor: COLORS.primary,
  },

  distanceBadge: {
    backgroundColor: COLORS.background.overlay,
  },

  // 文字
  text: {
    color: COLORS.white,
    fontSize: FONT_SIZE.md,
    fontWeight: FONT_WEIGHT.semibold,
  },

  text_sm: {
    fontSize: FONT_SIZE.xs,
  },

  text_md: {
    fontSize: FONT_SIZE.sm,
  },

  text_lg: {
    fontSize: FONT_SIZE.md,
  },
});
